<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#httpServletRequest.getContextPath()}">
    <title>注册登录页面</title>
    <link rel="stylesheet" href="../static/css/login.css" th:href="@{/css/login.css}">
    <script src="../static/jquery/jquery-2.1.1.min.js" th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <!-- 引入 layui.js -->
    <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
</head>

<body>
<div class="content">
    <div class="form sign-in">
        <h2>欢迎回来</h2>
        <form class="layui-form" method="post" action="/do/login">
            <!--            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">-->
            <label>
                <span>账号 / 手机号</span>
                <input style="margin-top: 10px;font-size: 18px" type="text" name="idOrPhone" required
                       lay-verify="required" lay-reqtext="账号或手机号不能为空">
            </label>
            <label>
                <span>密码</span>
                <input style="margin-top: 10px;font-size: 18px" type="password" name="password"
                       lay-verify="required">
            </label>
            <label>
                <span>验证码</span>
                <input style="margin-top: 10px;font-size: 18px" type="text" name="code" required lay-verify="required"
                       autocomplete="off">
            </label>
            <label>
                <img src="/get/verify/code" alt="图片不存在" id="verify-img">
            </label>
            <button class="submit" type="submit" lay-submit="" style="margin-left: 160px">登 录</button>
            <div th:if="${param.error}" style="margin-bottom: 10px;margin-left: 20px;font-size: 20px;float: right">
                <i class="layui-icon layui-icon-face-cry" style="font-size: 18px;color: red"></i>
                <span th:if="${#strings.trim(param.error) eq 'verify_error'}" th:text="验证码错误"></span>
                <span th:unless="${#strings.trim(param.error) eq 'verify_error'}" th:text="账号或密码错误"></span>
            </div>
        </form>
    </div>
    <div class="sub-cont">
        <div class="img">
            <div class="img__text m--up">
                <h2>还未注册？</h2>
                <p>点击下方注册吧！</p>
            </div>
            <div class="img__text m--in">
                <h2>已有帐号？</h2>
                <p>有帐号就登录吧，好久不见了！</p>
            </div>
            <div class="img__btn">
                <span class="m--up">注 册</span>
                <span class="m--in">登 录</span>
            </div>
            <br/>
            <div class="img__btn">
                <span><a href="javascript:forget()" style="color: #fff; ">忘记密码</a></span>
            </div>
        </div>
        <div class="form sign-up">
            <h2>立即注册</h2>
            <!--            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">-->
            <form onsubmit="register()" target="rfFrame" class="layui-form">
                <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
                <label>
                    <span>用户名</span>
                    <input id="name" style="margin-top: 10px;font-size: 18px" type="text" name="name"
                           lay-verify="username">
                </label>
                <label>
                    <span>手机号</span>
                    <input id="phone" style="margin-top: 10px;font-size: 18px" type="text" name="phone"
                           lay-verify="phone">
                </label>
                <label>
                    <span>手机验证码</span>
                    <input id="code" style="margin-top: 10px;font-size: 18px" type="text" name="code" required
                           lay-verify="verifyCode" autocomplete="off">
                </label>
                <label>
                    <span>密码</span>
                    <input id="password" style="margin-top: 10px;font-size: 18px" type="password"
                           name="password" required lay-verify="password">
                </label>
                <label>
                    <span>确认密码</span>
                    <input style="margin-top: 10px;font-size: 18px" type="password" required
                           lay-verify="confirmPass">
                </label>
                <div class="layui-btn-container" style="margin-top: 20px;margin-left: 100px">
                    <button class="layui-btn layui-btn-warm" type="button" id="send_verify_btn"
                            style="background: #63a35c;text-transform: uppercase;width: 180px;height: 36px;border-radius: 30px;color: #fff;font-size: 15px;cursor: pointer;">
                        发送验证码
                    </button>
                    <button class="layui-btn layui-btn-warm" type="submit" lay-submit=""
                            style="background: #d4af7a;text-transform: uppercase;width: 180px;height: 36px;border-radius: 30px;color: #fff;font-size: 15px;cursor: pointer;">
                        注册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../static/js/login.js" th:src="@{/js/login.js}"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        const form = layui.form
            , layer = layui.layer
            , $ = layui.$;

        // 刷新验证码
        $("#verify-img").click(function () {
            $("#verify-img").attr({src: "/get/verify/code?" + new Date().getTime()});
        })

        // 自定义验证规则
        form.verify({
            username: [
                /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,10}$/,
                '用户名必须为3-10个字符'
            ]
            , password: [
                /^[\S]{6,16}$/
                , '密码必须6到16位，且不能出现空格'
            ]
            ,
            confirmPass: function (value) {
                if (value.isEmpty) {
                    return '请再次输入密码！';
                }
                if ($('#password').val() !== value) {
                    return '两次密码输入不一致！';
                }
            }
            , verifyCode: [
                /^[0-9]{6}$/
                , '验证码错误'
            ]
        });

    });

    function forget() {
        layer.open({
            type: 2,
            title: ['忘记密码', 'font-size:25px;font-weight: bolder'],
            area: ['630px', '350px'],
            shadeClose: false,
            content: '/forget/password/page.html'
        });
    }
</script>
<script>
    $("#send_verify_btn").click(function () {
        let reg = /^1[3456789][0-9]{9}$/;
        let phone = $("input[name=phone]").val();
        if (!reg.test(phone)) {
            layer.msg("手机号码格式错误", {icon: 0, offset: "auto", time: 2000});
            return;
        }
        var result = -1;
        $.ajax({
            url: "/send/message/verify/code",
            type: "post",
            data: {
                phone: phone
            },
            async: false,
            dataType: "json",
            success: function (response) {
                let code = response.code;
                if (code == 0) {
                    layer.msg("发送成功!", {icon: 1, offset: "auto", time: 2000});
                    result = 0;
                } else {
                    layer.msg("发送失败! " + response.code + " " + response.msg, {icon: 0, offset: "auto", time: 2000});
                }
            },
            error: function (response) {
                layer.msg("发送失败! " + response.status + " " + response.statusText, {
                    icon: 0,
                    offset: "auto",
                    time: 2000
                });
            }
        })
        if (result !== 0) {
            return;
        }
        let that = $(this);
        let time = 60;
        let timeStop = setInterval(function () {
            if (--time > 0) {
                that.text('重新发送' + time + 's');
                that.addClass("layui-btn-disabled").attr("disabled", true)
            } else {
                time = 60;  // 当减到0时赋值为60
                that.text('获取验证码');
                clearInterval(timeStop); // 清除定时器
                that.removeClass("layui-btn-disabled").attr("disabled", false);    // 移除属性，可点击
            }
        }, 1000)
    });
</script>
</body>
</html>